<template>
	<view>
		<view class="header status_bar">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text">添加店铺</view>
		</view>
		<view class="clear_box"></view>

		<view class="address_list">
			<view class="title">店铺名称</view>
			<input type="text" v-model="name" placeholder="请填写姓名" />
		</view>
		
		<!-- <view class="address_list">
			<view class="title">店铺介绍</view>
			<input type="text" v-model="storeInfo" placeholder="请填写店铺介绍" />
		</view> -->
		
		<view class="address_list">
			<view class="title">店铺电话</view>
			<input type="number" maxlength="11" v-model="phone" placeholder="请填写店铺电话" />
		</view>
		
		<view class="address_list">
			<view class="title">起送价</view>
			<input type="number" v-model="startingPrice" placeholder="请填写起送价" />
		</view>
		
		<!-- <view class="address_list">
			<view class="title">配送费</view>
			<input type="number" v-model="shippingPrice" placeholder="请填写配送费" />
		</view> -->
		
		<view class="address_list">
			<view class="title">地址</view>
			<input type="text" v-model="address" placeholder="请填写地址" />
		</view>
		
		<view class="address_list">
			<view class="title">店铺图片</view>
			<view class="img_box" @tap="getImg">
				<image :src="addImg" mode="scaleToFill"></image>
			</view>
		</view>
			

		<!-- <view class="address_list">
			<view class="title">联系电话</view>
			<input type="text" v-model="receive_tel" placeholder="请填写联系电话" />
		</view> -->

		<!-- <view class="address_list" @tap="openAddres">
			<view class="title">收货地址</view>
			<input type="text" :value="pickerText" disabled="true" placeholder="请选择省、市、区" />
		</view> -->

		<!-- <view class="address_list">
			<view class="title">详细地址</view>
			<input type="text" value="" placeholder="门牌号（街道、楼牌号）" />
			<textarea v-model="address" placeholder="门牌号（街道、楼牌号）"></textarea>
		</view> -->

		<button class="confirm02" @click="save">保存地址</button>

		<!-- <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
			themeColor="#333"></simple-address> -->
	</view>
</template>

<script>
	// import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		data() {
			return {
				// cityPickerValueDefault: [0, 0, 1],
				// pickerText: '',
				name: '',
				receive_tel: '',
				address: '',
				addressId: '',
				addImg: 'https://jiheshenhuo.oss-cn-hangzhou.aliyuncs.com/static/li/addimg.png',
				storeInfo:'',
				startingPrice:'',
				shippingPrice:'',
				phone:'',

			};
		},
		// components: {
		// 	simpleAddress
		// },
		onLoad(e) {
			let that = this;
			if (e.id) {
				that.addressId = e.id;
				that.loadInfo();
			}


		},
		methods: {
			getImg() {
				let that = this;
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
					sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
					success: function(res) {
						const temFilePath = res.tempFilePaths; //图片选择完成后 获取该图片的路劲
						uni.uploadFile({
							url: that.Cfg.Setting.root + 'uploads', //上传文件的Controller
							filePath: temFilePath[0], //要上传的文件路径
							name: 'file',
							success: res => {
								//console.log(JSON.parse(res.data))
								let imgData = JSON.parse(res.data);
								that.addImg = imgData.data.data;
							}
						});
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			// openAddres() {
			// 	this.cityPickerValueDefault = [0, 0, 1];
			// 	this.$refs.simpleAddress.open();
			// },

			// onConfirm(e) {
			// 	this.pickerText = JSON.stringify(e.label);
			// 	//console.log(this.pickerText);
			// },

			loadInfo() {
				let that = this;
				that.Net._get('terminal/village_store/' + that.addressId, {}, res => {
					if (res.code == 200) {
						that.name = res.data.name;
						that.addImg = res.data.image;
						that.storeInfo = res.data.store_info;
						that.startingPrice = res.data.starting_price;
						// that.shippingPrice = res.data.shipping_price;
						that.address = res.data.address;
						that.phone = res.data.mobile;
					}
				});
			},

			save() {
				let that = this;
				if (!that.name) {
					that.Msg.Fail('请填写店铺名');
					return;
				}
				
				// if (!that.storeInfo) {
				// 	that.Msg.Fail('请填写店铺介绍');
				// 	return;
				// }
				
				if (!that.phone) {
					that.Msg.Fail('请填写店铺电话');
					return;
				}
				
				if (!that.startingPrice) {
					that.Msg.Fail('请填写起送价');
					return;
				}
				
				// if (!that.shippingPrice) {
				// 	that.Msg.Fail('请填写配送费');
				// 	return;
				// }
				
				if (!that.address) {
					that.Msg.Fail('请填写地址');
					return;
				}
										
				
				if (that.addImg == 'https://jiheshenhuo.oss-cn-hangzhou.aliyuncs.com/static/li/addimg.png') {
					that.Msg.Fail('请上传店铺图片');
					return;
				}

				if (!that.addressId) {
					that.Net._post(
						'terminal/village_store', {
							name: that.name,
							starting_price:that.startingPrice,
							address:that.address,
							image: that.addImg,
							mobile:that.phone,
						},
						res => {
							if (res.code == 200) {
								that.Msg.Success('保存成功', res => {
									uni.navigateBack({});
								});
							} else if (res.code != 200) {
								that.Msg.Success(res.msg, res => {});
							}
						}
					);
				} else {
					that.Net._put(
						'terminal/village_store/' + that.addressId, {
							name: that.name,
							starting_price:that.startingPrice,
							address:that.address,
							image: that.addImg,
							mobile:that.phone,
						},
						res => {
							if (res.code == 200) {
								that.Msg.Success('保存成功', res => {
									uni.navigateBack({});
								});
							} else if (res.code != 200) {
								that.Msg.Success(res.msg, res => {});
							}
						}
					);
				}
			}
		}
	};
</script>

<style>
	page {
		padding-top: 4%;
	}

	.address_list {
		width: 92%;
		margin: 0 auto;
		display: flex;
		background-color: #fff;
		padding: 4%;
		border-bottom: 1px solid #f5f5f5;
	}

	.address_list:nth-child(3) {
		border-radius: 2vw 2vw 0 0;
	}

	.address_list:nth-child(6) {
		border-radius: 0 0 2vw 2vw;
	}

	.address_list:nth-child(4) .icon {
		font-size: 5.5vw;
	}

	.address_list:nth-child(5) .icon {
		font-size: 5.5vw;
	}

	.address_list:nth-child(6) .icon {
		font-size: 5.5vw;
	}

	.address_list .title {
		width: 20vw;
		text-align: left;
		color: #333;
		height: 7vw;
		line-height: 7vw;
		font-size: 4vw;
		font-weight: bold;
	}

	.address_list input {
		flex: 1;
		text-align: left;
		color: #333;
		height: 7vw;
		line-height: 7vw;
		font-size: 4vw;
	}

	.address_list textarea {
		flex: 1;
		text-align: left;
		color: #333;
		height: 30vw;
		line-height: 7vw;
		font-size: 4vw;
		background-color: #f5f5f5;
		border-radius: 1vw;
		padding: 1vw;
	}
	
	.address_list .img_box{
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}
	
	.address_list .img_box image{
		width: 18vw;
		height: 18vw;
		border-radius: 2vw;
	}
	
</style>
